<!DOCTYPE html>
<html>
<head>
    <title>Pinhole Camera Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Clear canvas and set background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Style settings ---
        // Using a font that mimics handwriting for authenticity
        ctx.font = "bold 24px 'Comic Sans MS', cursive, sans-serif";
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round'; // To make lines look a bit softer like ink

        // --- Define Geometry ---
        const boxX = 120;
        const boxY = 50;
        const boxW = 200; // Represents 10 cm
        const boxH = 300;
        const pinholeGapSize = 20;
        const pinholeCenterY = boxY + boxH / 2;
        const pinholeTopY = pinholeCenterY - pinholeGapSize / 2;
        const pinholeBottomY = pinholeCenterY + pinholeGapSize / 2;

        // --- Draw the Pinhole Camera Body ---
        ctx.beginPath();
        // Top, Right (film), and Bottom walls
        ctx.moveTo(boxX, boxY);
        ctx.lineTo(boxX + boxW, boxY);
        ctx.lineTo(boxX + boxW, boxY + boxH);
        ctx.lineTo(boxX, boxY + boxH);

        // Left wall (bottom part)
        ctx.lineTo(boxX, pinholeBottomY);
        // Bottom T-marker for pinhole
        ctx.moveTo(boxX, pinholeBottomY);
        ctx.lineTo(boxX - 10, pinholeBottomY);

        // Left wall (top part)
        ctx.moveTo(boxX, pinholeTopY);
        ctx.lineTo(boxX, boxY);
        // Top T-marker for pinhole
        ctx.moveTo(boxX, pinholeTopY);
        ctx.lineTo(boxX - 10, pinholeTopY);

        ctx.stroke();

        // --- Draw Labels ---

        // "pinhole" label
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('pinhole', boxX + 15, pinholeCenterY);

        // "film" label and pointer
        const filmText = 'film';
        const filmTextX = boxX + boxW - 75;
        const filmTextY = boxY + 30;
        ctx.fillText(filmText, filmTextX, filmTextY);
        const filmTextWidth = ctx.measureText(filmText).width;

        ctx.beginPath();
        ctx.moveTo(filmTextX + filmTextWidth + 2, filmTextY); // Start line right after text
        ctx.lineTo(boxX + boxW, filmTextY); // Point to the film wall
        ctx.stroke();

        // --- Draw Dimension Line for "10 cm" ---
        const dimY = boxY + boxH + 45;
        const dimText = '10 cm';
        ctx.textAlign = 'center';
        const dimTextWidth = ctx.measureText(dimText).width;
        const dimCenter = boxX + boxW / 2;
        const lineTextGap = 15;

        // Draw the line segments on either side of the text
        ctx.beginPath();
        // Left line segment
        ctx.moveTo(boxX, dimY);
        ctx.lineTo(dimCenter - dimTextWidth / 2 - lineTextGap, dimY);
        // Right line segment
        ctx.moveTo(dimCenter + dimTextWidth / 2 + lineTextGap, dimY);
        ctx.lineTo(boxX + boxW, dimY);

        // Draw the vertical ticks at the ends
        ctx.moveTo(boxX, dimY - 10);
        ctx.lineTo(boxX, dimY + 10);
        ctx.moveTo(boxX + boxW, dimY - 10);
        ctx.lineTo(boxX + boxW, dimY + 10);
        ctx.stroke();

        // Draw the dimension text in the middle
        ctx.fillText(dimText, dimCenter, dimY);

        // --- Draw Figure Label ---
        ctx.fillText('Fig. 2.67', dimCenter, dimY + 60);

    </script>
</body>
</html>